<template>
  <view v-if="visible" class="sidebar-modal" @tap="onBackdropClick">
    <view class="modal-content" @tap.stop>
      <view class="modal-header">
        <view class="modal-title">{{ item?.title || '' }}</view>
        <view class="modal-close" @tap="onClose">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <view class="modal-body">
        <view class="content-item">
          <text class="content-text">{{ item?.content || '' }}</text>
        </view>
        
        <!-- 根据不同类型显示不同内容 -->
        <view v-if="item?.title === '联系客服'" class="action-buttons">
          <button class="action-btn primary" @tap="onCall">拨打电话</button>
        </view>
        
        <view v-else-if="item?.title === '在线咨询'" class="action-buttons">
          <button class="action-btn primary" @tap="onWechat">打开微信</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import sheep from '@/sheep';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  item: {
    type: Object,
    default: () => null
  }
});

const emit = defineEmits(['close']);

// 关闭弹窗
const onClose = () => {
  emit('close');
};

// 点击背景关闭
const onBackdropClick = () => {
  emit('close');
};

// 拨打电话
const onCall = () => {
  // 这里可以集成实际的电话拨打功能
  sheep.$toast('正在为您接通客服电话...');
  emit('close');
};

// 打开微信
const onWechat = () => {
  // 这里可以集成微信相关功能
  sheep.$toast('正在为您打开微信...');
  emit('close');
};
</script>

<style lang="scss" scoped>
.sidebar-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 40rpx;

  .modal-content {
    background: #ffffff;
    border-radius: 16rpx;
    width: 100%;
    max-width: 600rpx;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 32rpx 0 32rpx;

      .modal-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
      }

      .modal-close {
        width: 48rpx;
        height: 48rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f5f5f5;

        .close-icon {
          font-size: 32rpx;
          color: #666666;
          line-height: 1;
        }
      }
    }

    .modal-body {
      padding: 32rpx;

      .content-item {
        margin-bottom: 32rpx;

        .content-text {
          font-size: 28rpx;
          color: #666666;
          line-height: 1.5;
        }
      }

      .action-buttons {
        display: flex;
        gap: 16rpx;

        .action-btn {
          flex: 1;
          height: 80rpx;
          border-radius: 12rpx;
          border: none;
          font-size: 28rpx;
          font-weight: 500;
          transition: all 0.3s ease;

          &.primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: #ffffff;

            &:active {
              opacity: 0.8;
            }
          }

          &.secondary {
            background: #f5f5f5;
            color: #666666;

            &:active {
              background: #e5e5e5;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 750rpx) {
  .sidebar-modal {
    padding: 20rpx;

    .modal-content {
      .modal-header {
        padding: 24rpx 24rpx 0 24rpx;

        .modal-title {
          font-size: 28rpx;
        }

        .modal-close {
          width: 40rpx;
          height: 40rpx;

          .close-icon {
            font-size: 28rpx;
          }
        }
      }

      .modal-body {
        padding: 24rpx;

        .content-item {
          margin-bottom: 24rpx;

          .content-text {
            font-size: 26rpx;
          }
        }

        .action-buttons {
          .action-btn {
            height: 72rpx;
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>
